import React from 'react';
import {Table, Card, DatePicker,Popconfirm} from 'antd';
import moment from 'moment';
import TaskService from '../../service/TaskService';
const { RangePicker} = DatePicker;
export default class ProcessList extends React.Component {

    state = {
        title:'task领取列表',
        tableList:[],
        loading:false,
        taskId:null
    };

    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this.state.taskId = this.props.match.params.id;
        this.fetch(this.state.taskId);
    }

    //查询方法
    fetch(id) {
        this.setState({
            loading: true,
        });
        let query = 'task.id=='+id;
        TaskService.getProcessByTaskId({query:query,size:1000}).done((res)=>{
            console.log(res.entity);
            this.setState({tableList:res.entity,loading: false});

        })
    }

    render() {
        return (
            <Card title={this.state.title} className="user">
                <Table
                    rowKey={record => record.id}
                    bordered={true}
                    loading={this.state.loading}
                    dataSource={this.state.tableList}
                    pagination={false}
                    columns={[
                        {title:"姓名", align:'center', dataIndex: 'name', key: 'creator',width:200,render : (text, record) => {
                            return (
                                <a onClick={()=>{
                                    this.props.history.push("/student/view/" + record.student.id);
                                }}>{record.student?((record.student.firstName||'')+' '+(record.student.lastName||'')):''}</a>
                            )
                        }},
                        {title:"用户昵称", align:'center', dataIndex: 'nickName', key: 'nickName',width:120,render:(text,record)=>{
                            return(
                                <span>{record.student.nickName}</span>
                            )
                        }},
                        {title:"电话", align:'center', dataIndex: 'phoneNumber', key: 'phoneNumber',width:150},
                        {title:"邮箱", align:'center', dataIndex: 'email', key: 'email',width:150},
                        {title:"领取时间", align:'center', dataIndex: 'createTime', key: 'createTime',width:150,render : (text, record) => {
                            return (
                                <span>{record.createTime?moment(record.createTime).format('YYYY-MM-DD'):''}</span>
                            )
                        }},
                        {title:"任务领取状态", align:'center', dataIndex: 'status', key: 'status',width:150,render : (text, record) => {
                            if(record.status==='REQUEST'){
                                return (
                                    <span>已申请</span>
                                )
                            }else if(record.status==='PROCESSING'){
                                return (
                                    <span>进行中</span>
                                )
                            }else if(record.status==='DONE'){
                                return (
                                    <span>已完成</span>
                                )
                            }
                        }},
                        {title:"操作", align:'center', dataIndex: 'operation', key: 'operation',width:200,
                            render : (text, record) => {
                                console.log('record',record);
                                return (
                                    <div className='btn-cen-div'>
                                        {record.status==='REQUEST'&&
                                            <div>
                                        <Popconfirm placement="top" okText="确认" cancelText="关闭" title="是否通过申请?" onConfirm={() =>{
                                            let putData = record;
                                            let studentId = record.student.id;
                                            let taskId = record.task.id;
                                            putData.status = 'PROCESSING';
                                            putData.student = {id:studentId};
                                            putData.task = {id:taskId};
                                            console.log('putData',putData);
                                            TaskService.updateProcess(putData).done(()=>{
                                                this.fetch(this.state.taskId);
                                            })
                                        }}>
                                            <a>通过申请</a>
                                        </Popconfirm>
                                        <Popconfirm placement="top" okText="确认" cancelText="关闭" title="是否删除申请?" onConfirm={() =>{
                                            TaskService.deleteProcess(record.id).done(()=>{
                                                this.fetch(this.state.taskId);
                                            })
                                        }}>
                                            <a style={{color:'red'}}>拒绝申请</a>
                                        </Popconfirm></div>}
                                        {record.status==='PROCESSING'&&
                                        <Popconfirm placement="top" okText="确认" cancelText="关闭" title="是否确认任务已完成?" onConfirm={() =>{
                                            let putData = record;
                                            let studentId = record.student.id;
                                            let taskId = record.task.id;
                                            putData.status = 'DONE';
                                            putData.student = {id:studentId};
                                            putData.task = {id:taskId};
                                            console.log('putData',putData);
                                            TaskService.updateProcess(putData).done(()=>{
                                                this.fetch(this.state.taskId);
                                            })
                                        }}>
                                            <a>确认完成</a>
                                        </Popconfirm>}
                                        {record.status==='DONE'&&
                                            <a style={{color:'gray'}}>已完成</a>}
                                        {/*<Popconfirm placement="top" okText="确认" cancelText="关闭" title="是否确定删除?" onConfirm={() =>{*/}
                                            {/*TaskService.deleteProcess(record.id).done(()=>{*/}
                                                {/*this.fetch(this.state.taskId);*/}
                                            {/*})*/}
                                        {/*}}>*/}
                                            {/*<a>删除</a>*/}
                                        {/*</Popconfirm>*/}
                                    </div>
                                )
                            }
                        },
                    ]}
                />
            </Card>
        )
    }
}